<template>
  <transition name='my'>
    <div id="content">
      <div>
        <header>
          <!-- 头部区域 -->
          <router-link to="/" tag="div" class="show" v-show="showTime"
            >⇦</router-link
          >
          <div class="hide" v-show="showTimes" :style="opacityStyle">
            <router-link to="/" tag="h3">⇦</router-link>
            <h2>景点详情</h2>
          </div>
          <ul>
            <li>
              <img :src="imgList[0]" alt="" @click="swipers = !swipers" />
            </li>
          </ul>
        </header>
        <!-- 轮播区域 -->
        <transition>
          <div class="wrapper" v-show="swipers" @click="swipers = !swipers">
            <swiper>
              <!-- slides -->
              <swiper-slide v-for="item in imgList" :key="item.id">
                <img class="swiper-img" :src="item" />
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </transition>
        <main>
          <!-- 递归区域 -->
          <div class="item" v-for="(item, index) in deList" :key="index">
            <div class="item-title border-bottom">
              <span class="item-title-icon"></span>
              {{ item.title }}
              <div
                v-for="(item, index) in item.children"
                :key="index"
                class="item-chilren"
              >
                <span class="item-title-icon"></span>
                {{ item.title }}
                <div
                  v-for="(item, index) in item.children"
                  :key="index"
                  class="item-chilren"
                >
                  <span class="item-title-icon"></span>
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  </transition>
</template>
<script>
import axios from "axios";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      showTime: true,
      showTimes: false,
      imgList: [],
      swipers: false,
      deList: [],
      opacityStyle: {
        opacity: 0,
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getImg();
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    getImg() {
      axios.get("/static/detail.json").then((res) => {
        this.imgList = res.data.data.gallaryImgs;
        this.deList = res.data.data.categoryList;
      });
    },
    handleScroll() {
      //   console.log(document.documentElement.scrollTop);
      const top = document.body.scrollTop || document.documentElement.scrollTop;
      if (top > 10) {
        let opacity = top / 140;
        opacity = opacity > 1 ? 1 : opacity;
        this.opacityStyle = { opacity };
        this.showTime = false;
        this.showTimes = true;
      } else {
        this.showTime = true;
        this.showTimes = false;
      }
    },
    // activated() {
    // //   console.log(111);
    //   window.addEventListener("scroll", this.handleScroll);
    // },
    // deactivated() {
    //   //页面即将替换新的页面的时候
    //   window.removeEventListener("scroll", this.handleScroll);
    // },
  },
};
</script>
<style lang='stylus' scoped>
header {
  position: relative;

  .show {
    position: absolute;
    left: 0;
    top: 0;
    height: 1rem;
    background: rgba(100, 100, 100, 0.7);
    border-radius: 50%;
    width: 1rem;
    text-align: center;
    line-height: 1rem;
    font-size: 0.6rem;
    color: #fff;
  }

  .hide {
    position: fixed;
    left: 0;
    top: 0;
    height: 1rem;
    background: #0088dd;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    font-size: 0.5rem;
    z-index: 3;
    width: 100%;

    h3 {
      position: absolute;
      top: -8%;
      left: 5%;
      // background #ddd
      font-size: 1rem;
    }
  }

  ul>li>img {
    width: 100%;
    height: 90vw;
  }
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding-top: 35%;
  height: 100%;
  background: #000;
  z-index: 4;

  img {
    width: 100vw;
    height: 100vw;
  }
}

.item-title-icon {
  position: relative;
  left: 0.06rem;
  top: 0.06rem;
  display: inline-block;
  width: 0.36rem;
  height: 0.36rem;
  background: url('http://s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -0.45rem no-repeat; // s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
  margin-right: 0.1rem;
  background-size: 0.4rem 3rem;
}

.item-title {
  line-height: 0.8rem;
  font-size: 0.32rem;
  padding: 0 0.2rem;
}

main {
  margin-top: 1rem;
}

.v-enter, .v-leave-to {
  opacity: 0;
  transform: translateX(300px);
}

.v-enter-active, .v-leave-active {
  transition: all 0.8s ease;
}
.my-enter, .my-leave-to {
  opacity: 0;
  transform: translateX(-500px);
}

.my-enter-active, .my-leave-active {
  transition: all 0.8s ease;
}

#content {
  height: 100rem;
}
</style>